<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 200px;
            overflow: auto;
            border: 1px solid #000;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>fdbvgfudjvbbkvfbvfdjivdfvbfvfdbvdiobdbhxdxbsib</p>
        <p>iwgefbeugkhgekgdebhbiokfhbofidlbkhbfobhkldbif</p>
        <p>weuifkshbnfijvgyujsvgbdsjfgbvudvj</p>
        <p>fdbvgfudjvbbkvfbvfdjivdfvbfvfdbvdiobdbhxdxbsib</p>
        <p>iwgefbeugkhgekgdebhbiokfhbofidlbkhbfobhkldbif</p>
        <p>weuifkshbnfijvgyujsvgbdsjfgbvudvj</p>
        <p>fdbvgfudjvbbkvfbvfdjivdfvbfvfdbvdiobdbhxdxbsib</p>
        <p>iwgefbeugkhgekgdebhbiokfhbofidlbkhbfobhkldbif</p>
        <p>weuifkshbnfijvgyujsvgbdsjfgbvudvj</p>
        <p>fdbvgfudjvbbkvfbvfdjivdfvbfvfdbvdiobdbhxdxbsib</p>
        <p>iwgefbeugkhgekgdebhbiokfhbofidlbkhbfobhkldbif</p>
        <p>weuifkshbnfijvgyujsvgbdsjfgbvudvj</p>
    </div>
    <button class="btn">返回顶部</button>
</body>
<script>
    let box = document.querySelector('.box');
    box.addEventListener('scroll',function(){
        // console.log(box.scrollHeight,box.clientHeight,box.offsetHeight);//clientHeight是整个内容区的高度；scrollHeight是元素内容的高度，包括溢出的不可见内容
        // offsetHeight是元素的像素高度 包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数
        const sign = 10;
        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
        if(scrollDistance <= sign){
            creates();
        }
        function creates(){
            console.log(1111);
            let p = document.createElement("p");
            p.innerText = '111111111111111111111111111111111111111111';
            return box.appendChild(p)
        }
    })
    let btn = document.querySelector('.btn');
    btn.onclick = function(){
        box.scrollTop = 0;
    }
</script>
</html>